<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引用Jquery的Js文件 -->
<script type="text/javascript" src="../static/jquery.min.js"></script>
<!-- 引用Easy UI的Js文件 -->
<script type="text/javascript" src="../static/easyUI/jquery.easyui.min.js"></script>
<!-- 导入Easy UI的主题Css文件 -->
<link rel="stylesheet" type="text/css" href="../static/easyUI/themes/default/easyui.css">
<!-- 导入Easy UI的图标Css文件 -->
<link rel="stylesheet" type="text/css" href="../static/easyUI/themes/icon.css">
<!-- 引用Easy UI的国际化文件  -->
<script type="text/javascript" src="../static/easyUI/locale/easyui-lang-zh_CN.js"></script>
<!-- 共通文件 -->
<script type="text/javascript" src="../static/common/common-constant.js"></script>

<!-- 导出Excel用 -->
<script type="text/javascript" src="../static/alasql/xlsx.core.min.js"></script>
<script type="text/javascript" src="../static/alasql/alasql.min.js"></script>

<!-- 日期格式化 -->
<script type="text/javascript" src="../static/dateFormat/dateFormat.min.js"></script>

<!-- 百度地图 -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=h5z3UvrVR71gt82UNvd8S8Kf" type="text/javascript"></script>
<title>分页</title>
</head>
<body>

<table id="tt" class="easyui-datagrid" rownumbers="true" toolbar="#tb"
			title="用户列表">
<!-- 	<thead> -->
<!-- 		<tr> -->
<!-- 			<th field="userName" width="80">姓名</th> -->
<!-- 			<th field="password" width="80">密码</th> -->
<!-- 			<th field="emailAddress" width="80" align="right">邮箱</th> -->
<!-- 			<th field="isDelete" width="80" align="right">状态</th> -->
<!-- 			<th field="isDelete" width="80" align="right">操作</th> -->
<!-- 		</tr> -->
<!-- 	</thead> -->
</table>
<div id="tb" style="padding:3px">
	<span>姓名:</span>
	<input id="userName" style="line-height:26px;border:1px solid #ccc">
	<span>邮箱:</span>
	<input id="emailAddress" style="line-height:26px; border:1px solid #ccc;">
	<a href="#" class="easyui-linkbutton" id="serachLink" iconCls="icon-search">查询</a>
	<a href="#" class="easyui-linkbutton" id="printLink" iconCls="icon-print">导出</a>
</div>
<div id="map" style="width:500px;height:320px"></div>  
<div>搜索结果：<input type="text" id="suggestId" size="20" value="" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

<script type="text/javascript">
	
	   
	
	$(function() {
		// 列表检索
		var table = $('#tt').datagrid({
			url: '<%=request.getContextPath()%>/user/users',
			//loadFilter: function(data) { // data: 服务器返回数据
				// 按照现在的服务器返回数据格式，此函数可以不写
				// 该函数必须返回标准数据对象，含有 'total' 和 'rows' 属性。
			//	return data;
			//},
			columns: [[
				{field:'userName',title:'姓名',width:10},
				{field:'password',title:'密码',width:10},
				{field:'emailAddress',title:'邮箱',width:20},
				{field:'isDelete',title:'状态',width:10,
					formatter: function(value,row,index) { // 格式化输出
						// value：字段的值。
						// rowData：行的记录数据。
						// rowIndex：行的索引。
						
						return value;
					}
				},
				{field:'Id',title:'操作',width:10,
					formatter: function(value,row,index) { // 格式化输出
						// value：字段的值。
						// rowData：行的记录数据。
						// rowIndex：行的索引。
						
						// 当多列数据的field值相同时，formatter就会失效。
						if (row.isDelete == "1") {
							return "<a href='javascript:;' data-id='"+value+"' target='_blank'>可用</a>";
						}else {
							return "<a href='javascript:;' data-id='"+value+"' target='_blank'>不可用</a>";
						}
					}
				}
			]],
			pagination: true, // 开启分页
			
			// 自定义pageSize时必须同时设置pageList，否则不生效
			// 如果pageSize的值不在pageList中时，程序会以pageList中最小的值显示，而设置的pageSize依然无效。
			pageSize: page_size,  // 每页显示数
			pageList: [page_size, page_size*2, page_size*3],
			
			emptyMsg: '没有找到相关数据', // 没有数据的场合
			idField: 'userName', // 指示哪个字段是标识字段。
			striped: true, // 设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
			queryParams: { // 初期查询
				jsonString: JSON.stringify({limit: 0, pageSize: page_size})
			},
			fitColumns: true // 自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动
		});
		
		// 分页事件
		var pg = $('#tt').datagrid('getPager'); // 返回分页（pager）对象。
		if (pg) {
			$(pg).pagination({
				onSelectPage:function(pageNumber, pageSize){
					// 算出当前偏移量
					var limit = pageSize*pageNumber-pageSize;
					// reload: 重新加载行，就像 load 方法一样，但是保持在当前页。
		            $("#tt").datagrid("reload",{jsonString: JSON.stringify({limit: limit, pageSize: pageSize})});  
				},
				// 自定义显示布局
				//layout: ['list','sep','first','prev','sep','manual','sep','links','next','last','sep','efresh']
			});
		}
		
		// 点击查询
		$('#tb').on('click', '#serachLink' ,function(e){
			var userName = $("#userName").val(),
				emailAddress = $("#emailAddress").val();
			
			var obj = {
						userName: userName == '' ? undefined : userName,
						emailAddress: emailAddress == '' ? undefined : emailAddress,
						limit: 0, 
						pageSize: page_size
			};
			
			// 检索数据库
			// load: 加载并显示第一页的行
			$('#tt').datagrid('load',{
					jsonString: JSON.stringify(obj)
			});
		});
		
		// 导出Excel
		$('#tb').on('click', '#printLink',function(e) {
			var userName = $("#userName").val(),
				emailAddress = $("#emailAddress").val();
			var jsonStr = {
					userName: userName == '' ? undefined : userName,
					emailAddress: emailAddress == '' ? undefined : emailAddress,
    			},
    			data = JSON.stringify(jsonStr); 
			// 服务器下载 start
//             var form = $("<form>");
//             form.attr("style","display:none");
//             form.attr("target","");
//             form.attr("method","post");
//             //form.attr("Content-Type","application/x-www-form-urlencoded");
<%--             form.attr("action", '<%=request.getContextPath()%>/user/exportUserInfo'); --%>
//             var input1 = $('<input>'); 
//             input1.attr('type', 'hidden');  
//             input1.attr('name', 'jsonString');  
//             input1.attr('value', data);  
//             form.append(input1);  
//             $("body").append(form);
//             form.submit();
//             form.remove();
         	// 服务器下载 end
         	
         	// 前端下载 start
         	$.ajax({
         		url: '<%=request.getContextPath()%>/user/exportUserInfoList',
         		data: {jsonString: data},
         		dataType: 'json',
         		type: 'post',
         		async: true
         	}).done(function(resp) {
				if (resp.success) {
					var data = resp.data;
					var rows = [];
					$(data).each(function(index, elem) {
						var dt = {
								'用户名': elem.userName,
								'密码': elem.password,
								'E-mail地址': elem.emailAddress,
								'可用状态': elem.isDelete,
								'创建日期': elem.createDate
						}
						
						rows.push(dt);
					});
					
					// header:true显示表头,false不显示表头
					var opts = "{ sheetid: '用户列表', header: true }"; 
					var fileName = "用户列表"+ dateFormat(new Date(),'yyyymmddHHMMss') +".xlsx";
					alasql("SELECT * INTO XLSX('" + fileName + "'," + opts + ") FROM ?", [rows]);
				}
			});
         	// 前端下载 end
		});
		
		function G(id) {
			return document.getElementById(id);
		}
		var map = null;
		initialize();
		// 百度地图
		function initialize() {  
			  map = new BMap.Map('map');  
			  map.centerAndZoom(new BMap.Point(120.3054559,31.57003745), 11);  
			  //map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
			  map.setCurrentCity("无锡",11);          // 设置地图显示的城市 此项是必须设置的
			  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			  var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r){
					if(this.getStatus() == BMAP_STATUS_SUCCESS){
						var mk = new BMap.Marker(r.point);
						map.addOverlay(mk);
						map.panTo(r.point);
					}
					else {
						alert('failed'+this.getStatus());
					}        
				},{enableHighAccuracy: true})
				//关于状态码
				//BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
				//BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
				//BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
				//BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
				//BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
				//BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
				//BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
				//BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
				//BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)
		}  
		
		var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
				{"input" : "suggestId"
				,"location" : map
			});
		
		ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
			var str = "";
			var _value = e.fromitem.value;
			var value = "";
			if (e.fromitem.index > -1) {
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
			
			value = "";
			if (e.toitem.index > -1) {
				_value = e.toitem.value;
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
			G("searchResultPanel").innerHTML = str;
		});

		var myValue;
		ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
		var _value = e.item.value;
			myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
			
			setPlace();
		});

		function setPlace(){
			map.clearOverlays();    //清除地图上所有覆盖物
			function myFun(){
				var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
				map.centerAndZoom(pp, 18);
				map.addOverlay(new BMap.Marker(pp));    //添加标注
			}
			var local = new BMap.LocalSearch(map, { //智能搜索
			  onSearchComplete: myFun
			});
			local.search(myValue);
		}
		
	});
</script>
</body>
</html>